<template>
  <div class="my-pages">
    <p><span>共</span>{{ total }}<span>条记录</span> <span>第</span> {{ page }}/{{ Math.ceil(total / num) || 1 }} <span>页</span></p>
    <div>
      <button class="btn-prev" :disabled="page<=1?true:false" @click="toPrev">上一页</button>
      <button class="btn-next" :disabled="page>=Math.ceil(total / num)?true:false" @click="toNext">下一页</button>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {
  },
  props: {
    total: {
      type: String,
      default: '0'
    },
    num: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      page: 1
    }
  },
  computed: {
  },
  methods: {
    toPrev() {
      this.page--
      if (this.page <= 1) {
        this.page = 1
        return
      }
    },
    toNext() {
      this.page++
      if (this.page >= (Math.ceil(this.total / this.num))) {
        this.page = Math.ceil(this.total / this.num)
        return
      }
    }
  }
}
</script>
<style scoped>
.my-pages{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.my-pages .btn-prev,.btn-next{
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    border: none;
}
</style>
